<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/indesx.css">
    <link rel="stylesheet" href="../css/css/swiper.min.css">
  <script src="../js/js/swiper.min.js"></script>
  <link rel="stylesheet" href="../css/3.css">
    <title>酒店房间</title>
</head>
<body>

<div class="box">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../images/1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/4.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/5.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/10.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/11.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/12.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/13.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
</div>
<script>
    var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
  delay: 2000,
  stopOnLastSlide: false,
  disableOnInteraction: true,
  },
  });
</script>

<div class="admin"> 
    网站首页>>
</div>
<div class="body_center">
    <div>酒店房间</div>
    <div>HOTEL ROOM</div>
</div>
<div class="body_foot">
    
        <ul class="body_active">
            <li><a class="active">单人间</a></li>
            <li><a >双人间</a></li>
            <li><a >会议套房</a></li>
        </ul>
    
        <div class="body_tab ">
            <div class="body_tab_center active">
                <div class="item ">
                    <img src="../images/单1.jpg" alt="">
                    <div class="item-pay">139.00
                        <form action="">
                        <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/单2.jpg" alt="">
                    <div class="item-pay">149.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/单3.jpg" alt="">
                    <div class="item-pay">159.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="body_tab ">
                <div class="body_tab_center">
                <div class="item ">
                    <img src="../images/双1.jpg" alt="">
                    <div class="item-pay">239.00
                        <form action="">
                        <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/双2.jpg" alt="">
                    <div class="item-pay">249.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/双3.jpg" alt="">
                    <div class="item-pay">259.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/双4.jpg" alt="">
                    <div class="item-pay">269.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="body_tab ">
                <div class="body_tab_center">
                <div class="item ">
                    <img src="../images/套1.jpg" alt="">
                    <div class="item-pay">339.00
                        <form action="">
                        <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/套2.jpg" alt="">
                    <div class="item-pay">349.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <img src="../images/套3.jpg" alt="">
                    <div class="item-pay">359.00
                        <form action="">
                            <button type="submit">订购</button>
                        </form>
                    </div>
                </div>
                </div>
        </div>
    </div>
<script>
    const as=document.querySelectorAll('.body_active a')
    var a = document.querySelectorAll('a')
    var bodycenter = document.querySelectorAll('.body_tab_center');
   for(let i=0;i<a.length;i++){
    let index;
    a[i].addEventListener('click',function(){
        document.querySelector('a.active').classList.remove('active')
        this.classList.add('active')

        document.querySelector('.body_tab_center.active').classList.remove('active')
        bodycenter[i].classList.add('active')
    })
   }
// var bodycenter = document.querySelectorAll('.body_tab_center');
// function active(index) {
//     bodycenter.forEach((item) => {item.classList.remove('active')}
// );
// bodycenter[index].classList.add('active')
// }
</script>
</body>
</html>
